

<template>
  <el-dialog title="预约"  :visible.sync="isAppoint" width="40%" :before-close="closeAppoint">
    <el-form label-width="120px" :model="appointForm">
      <div style="margin:20px;">
        <div style="display:flex;justify-content:space-between;">
            <span v-for="(item,index) in week" :key="index" :class="{'top_style':item.is_active==0,'top_active':item.is_active==1}" @click="changWeek(item,index)">
              <div style="height:25px;line-height:20px;">{{item.month}}-{{item.date}}</div>
              <div style="height:25px;line-height:20px;">{{item.day}}</div>
            </span>
        </div>
        <div style="display:flex;margin:20px 50px;font-size:18px;justify-content:space-between;">
          <div style="display:flex;"><div style="background-color:#C8C9CC;width:40px;height:20px;margin-right:10px;"></div><div>不可预约</div></div>
          <div style="display:flex;"><div style="background-color:#ffa4a4;width:40px;height:20px;margin-right:10px;"></div><div>已有预约</div></div>
          <div style="display:flex;"><div style="background-color:#3EA7F1;width:40px;height:20px;margin-right:10px;"></div><div>当前预约</div></div>
        </div>
        <div style="margin:20px 50px;height:250px" class="button_wrap">
          <el-button v-for="(item,index) in timeArr" :key="index" @click="changTime(item,index)" :type="item.status==0?'':item.status==1?'danger':item.status==2?'info':'primary'" :disabled="item.status==1||item.status==2" class="button_style">{{item.time}}</el-button>
        </div>
      </div>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="备注：">
            <el-input placeholder="请输入" v-model="remark" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" >
      <el-button @click="closeAppoint">取消</el-button>
      <el-button type="primary" @click="saveAppoint" style="margin-left:20px;">确定</el-button>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.top_style,.top_active{
  border:1px solid #AAA;
  padding:3px 20px;
  text-align:center;
}
.top_active{
  border-color:#02A7F0;
  color: #02A7F0;
}
.button_style{
  text-align:center;
  float:left;
  width: 80px;
}
</style>
